<template>
  <div class="changepassword-page">
    <container-box :metaTitle="routeMeta.title || ''">
      <div class="container" slot="container">
        <div class="modal-wrap">
          <div class="modal-container">
            <div class="modal-header">
              修改密码
              <mds-icon type="close" />
            </div>
            <div class="modal-content">
              <div class="form-item">
                <label>原密码</label>
                <div class="form-item-content">
                  <mds-input v-model="formValue.oldPassword" placeholder="请输入原始密码"></mds-input>
                </div>
              </div>
              <div class="form-item">
                <label>新密码</label>
                <div class="form-item-content">
                  <mds-input v-model="formValue.newPassword" placeholder="请输入新密码"></mds-input>
                  <p>密码至少由8个字符组成，必须包含数字、字母，区分大小写</p>
                </div>
              </div>
              <div class="form-item">
                <label>确认密码</label>
                <div class="form-item-content">
                  <mds-input v-model="formValue.truePassword" placeholder="请再次输入原始密码"></mds-input>
                </div>
              </div>
              <div class="form-item">
                <label>验证码</label>
                <div class="form-item-content">
                  <mds-input v-model="formValue.verificationCode" placeholder="图片验证码"></mds-input>
                  <i class="icon-code"></i>
                </div>
              </div>
              <div class="form-item">
                <label></label>
                <div class="form-item-content">
                  <mds-button type="primary" size="large" block @click="onSubmit">提 交</mds-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </container-box>
  </div>
</template>

<script>
import ContainerBox from '@/components/ContainerBox'
export default {
  components: {
    ContainerBox
  },
  computed: {
    routeMeta() {
      return this.$route.meta || {}
    }
  },
  data() {
    return {
      formValue: {
        oldPassword: '',
        newPassword: '',
        truePassword: '',
        verificationCode: ''
      },
      submitState: 'error'
    }
  },
  methods: {
    onSubmit() {
      switch (this.submitState) {
        case 'success':
          this.$message.success({
            content: '修改成功',
            duration: 3
          })
          this.submitState = 'error'
          break
        case 'error':
          this.$message.error({
            content: '修改失败，请重试',
            duration: 3
          })
          this.submitState = 'success'
          break
        default: break
      }
    }
  }
}
</script>

<style>
.mds-message-notice-content {
  width: 572px;
}
</style>

<style lang="scss">
.changepassword-page {
  .containerbox-tab_item {
    position: relative;
  }
  .mdsicon-close {
    position: absolute;
    right: 20px;
  }
}
</style>
<style lang="scss" scoped>
.changepassword-page {
  width: 100%;
  height: 100%;
  .container {
    width: 100%;
    background: url(../../../assets/login_img/login_bg.png) no-repeat center
      center;
    background-size: 100% 100%;
    position: absolute;
    height: 100%;
    .modal-wrap {
      position: absolute;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6);
      .modal-container {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 560px;
        background: #fff;
        padding: 24px 20px 24px;
        box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.15);
        border-radius: 8px;
        .modal-header {
          padding-bottom: 8px;
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(53, 64, 82, 1);
          line-height: 24px;
        }
        .modal-content {
          padding: 16px 22px 0 0;
          .form-item {
            display: flex;
            margin-bottom: 16px;
            label {
              width: 98px;
              text-align: right;
              padding-right: 24px;
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: rgba(127, 143, 164, 1);
              line-height: 36px;
            }
            .form-item-content {
              flex: 1;
              position: relative;
              .icon-code {
                width: 77px;
                height: 28px;
                position: absolute;
                top: 4px;
                right: 4px;
                background: url(../../../assets/registration_img/code.png) no-repeat center center;
                background-size: contain;
              }
              p {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(169, 171, 186, 1);
                line-height: 22px;
                margin-top: 8px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
